<template>
	<div class="large-datacenter">
		<div class="m-20 justify-sb items-start flex" style="position: relative;z-index: 1;">
			<div class="top-controls flex-gap-20 flex border-radius-8 padding-10">
				<el-button-group class="flex">
					<el-button :class="{ active: viewMode === 'physical' }"
						@click="viewMode = 'physical'">物理布局</el-button>
					<el-button :class="{ active: viewMode === 'logical' }"
						@click="viewMode = 'logical'">网络逻辑</el-button>
				</el-button-group>
				<el-select v-model="currentZone" @change="filterByZone" placeholder="选择机房分区" style="width: 110px;">
					<el-option label="全部区域" value="all"></el-option>
					<el-option label="A区（核心）" value="zoneA"></el-option>
					<el-option label="B区（应用）" value="zoneB"></el-option>
					<el-option label="C区（存储）" value="zoneC"></el-option>
				</el-select>
				<el-switch v-model="showDetails" class="ml-2" inline-prompt
					style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="显示详情"
					inactive-text="精简视图" />
			</div>
			<div class="top-controls fc-fff border-radius-8 padding-15" style="width: 253px;">
				<h3>设备状态统计</h3>
				<div class="mb10 flex-gap-10 items-center flex">
					<span class="status-dot normal"></span>
					<span>正常运行: {{ statusCount.normal }}</span>
				</div>
				<div class="mb10 flex-gap-10 items-center flex">
					<span class="status-dot warning"></span>
					<span>高负载: {{ statusCount.warning }}</span>
				</div>
				<div class="mb10 flex-gap-10 items-center flex">
					<span class="status-dot error"></span>
					<span>故障: {{ statusCount.error }}</span>
				</div>
				<div class="link-stats">
					<p>活跃链路: {{ activeLinks }}条</p>
					<p>总带宽: {{ totalBandwidth }}Gbps</p>
				</div>
			</div>
		</div>
		<div style="position: absolute;top: 88px;left:20px;width: 96vw;">
			<div id="large-topology" class="chart-container"></div>
		</div>
		<!-- ECharts主容器 -->
	</div>
</template>

<script setup>
	import {
		onMounted,
		ref,
		watch,
		computed
	} from 'vue';
	import * as echarts from 'echarts';
	import {
		ElButton,
		ElButtonGroup,
		ElSelect,
		ElOption,
		ElSwitch
	} from 'element-plus';

	// 状态管理
	const myChart = ref(null);
	const viewMode = ref('physical'); // 物理布局/网络逻辑
	const currentZone = ref('all'); // 机房分区筛选
	const showDetails = ref(true);
	const statusCount = ref({
		normal: 0,
		warning: 0,
		error: 0
	});
	const activeLinks = ref(0);
	const totalBandwidth = ref(0);

	// 完整机房数据（包含所有设备和链路）
	const datacenterData = {
		zones: ['zoneA', 'zoneB', 'zoneC'],
		nodes: [
			// A区：核心网络设备（包含防火墙及关联设备）
			{
				id: 'gw1',
				type: 'gateway',
				name: '核心网关1',
				zone: 'zoneA',
				x: 100,
				y: 100,
				status: 'normal',
				rack: 'R01',
				u: 5
			},
			{
				id: 'gw2',
				type: 'gateway',
				name: '核心网关2',
				zone: 'zoneA',
				x: 100,
				y: 200,
				status: 'normal',
				rack: 'R01',
				u: 7
			},
			{
				id: 'core-sw1',
				type: 'core-switch',
				name: '核心交换机1',
				zone: 'zoneA',
				x: 100,
				y: 300,
				status: 'warning',
				rack: 'R02',
				u: 3
			},
			{
				id: 'core-sw2',
				type: 'core-switch',
				name: '核心交换机2',
				zone: 'zoneA',
				x: 100,
				y: 400,
				status: 'normal',
				rack: 'R02',
				u: 5
			},
			{
				id: 'firewall',
				type: 'firewall',
				name: '边界防火墙',
				zone: 'zoneA',
				x: 100,
				y: 500,
				status: 'normal',
				rack: 'R03',
				u: 2
			},
			{
				id: 'dmz-switch',
				type: 'access-switch',
				name: 'DMZ交换机',
				zone: 'zoneA',
				x: 200,
				y: 500,
				status: 'normal',
				rack: 'R03',
				u: 4
			},

			// B区：应用服务器机柜及内部服务器（强化机柜关联）
			{
				id: 'rack-b1',
				type: 'server-rack',
				name: '应用机柜B1',
				zone: 'zoneB',
				x: 350,
				y: 120,
				status: 'normal',
				u: [1, 42]
			},
			{
				id: 'srv-b1-1',
				type: 'server',
				name: 'Web服务器1',
				zone: 'zoneB',
				parent: 'rack-b1',
				status: 'normal',
				u: 5
			},
			{
				id: 'srv-b1-2',
				type: 'server',
				name: 'Web服务器2',
				zone: 'zoneB',
				parent: 'rack-b1',
				status: 'normal',
				u: 7
			},
			{
				id: 'srv-b1-3',
				type: 'server',
				name: 'Web服务器3',
				zone: 'zoneB',
				parent: 'rack-b1',
				status: 'warning',
				u: 9
			},
			{
				id: 'srv-b1-4',
				type: 'server',
				name: 'Web服务器4',
				zone: 'zoneB',
				parent: 'rack-b1',
				status: 'normal',
				u: 11
			},

			{
				id: 'rack-b2',
				type: 'server-rack',
				name: '应用机柜B2',
				zone: 'zoneB',
				x: 350,
				y: 320,
				status: 'normal',
				u: [1, 42]
			},
			{
				id: 'srv-b2-1',
				type: 'server',
				name: '应用服务器1',
				zone: 'zoneB',
				parent: 'rack-b2',
				status: 'normal',
				u: 5
			},
			{
				id: 'srv-b2-2',
				type: 'server',
				name: '应用服务器2',
				zone: 'zoneB',
				parent: 'rack-b2',
				status: 'error',
				u: 7
			},
			{
				id: 'srv-b2-3',
				type: 'server',
				name: '应用服务器3',
				zone: 'zoneB',
				parent: 'rack-b2',
				status: 'normal',
				u: 9
			},
			{
				id: 'srv-b2-4',
				type: 'server',
				name: '应用服务器4',
				zone: 'zoneB',
				parent: 'rack-b2',
				status: 'normal',
				u: 11
			},

			{
				id: 'rack-b3',
				type: 'server-rack',
				name: '应用机柜B3',
				zone: 'zoneB',
				x: 350,
				y: 520,
				status: 'normal',
				u: [1, 42]
			},
			{
				id: 'srv-b3-1',
				type: 'server',
				name: '缓存服务器1',
				zone: 'zoneB',
				parent: 'rack-b3',
				status: 'warning',
				u: 5
			},
			{
				id: 'srv-b3-2',
				type: 'server',
				name: '缓存服务器2',
				zone: 'zoneB',
				parent: 'rack-b3',
				status: 'normal',
				u: 7
			},
			{
				id: 'srv-b3-3',
				type: 'server',
				name: '缓存服务器3',
				zone: 'zoneB',
				parent: 'rack-b3',
				status: 'normal',
				u: 9
			},
			{
				id: 'srv-b3-4',
				type: 'server',
				name: '缓存服务器4',
				zone: 'zoneB',
				parent: 'rack-b3',
				status: 'normal',
				u: 11
			},

			// B区接入交换机（与机柜关联）
			{
				id: 'access-sw-b1',
				type: 'access-switch',
				name: '接入交换机B1',
				zone: 'zoneB',
				x: 250,
				y: 120,
				status: 'normal',
				rack: 'R04',
				u: 2
			},
			{
				id: 'access-sw-b2',
				type: 'access-switch',
				name: '接入交换机B2',
				zone: 'zoneB',
				x: 250,
				y: 320,
				status: 'normal',
				rack: 'R05',
				u: 2
			},
			{
				id: 'access-sw-b3',
				type: 'access-switch',
				name: '接入交换机B3',
				zone: 'zoneB',
				x: 250,
				y: 520,
				status: 'normal',
				rack: 'R06',
				u: 2
			},

			// C区：存储设备及机柜
			{
				id: 'rack-c1',
				type: 'storage-rack',
				name: '存储机柜C1',
				zone: 'zoneC',
				x: 600,
				y: 220,
				status: 'normal',
				u: [1, 42]
			},
			{
				id: 'nas-1',
				type: 'storage',
				name: 'NAS存储1',
				zone: 'zoneC',
				parent: 'rack-c1',
				status: 'normal',
				u: 10
			},
			{
				id: 'nas-2',
				type: 'storage',
				name: 'NAS存储2',
				zone: 'zoneC',
				parent: 'rack-c1',
				status: 'normal',
				u: 15
			},

			{
				id: 'rack-c2',
				type: 'storage-rack',
				name: '存储机柜C2',
				zone: 'zoneC',
				x: 600,
				y: 420,
				status: 'normal',
				u: [1, 42]
			},
			{
				id: 'san-1',
				type: 'storage',
				name: 'SAN存储1',
				zone: 'zoneC',
				parent: 'rack-c2',
				status: 'warning',
				u: 8
			},
			{
				id: 'san-2',
				type: 'storage',
				name: 'SAN存储2',
				zone: 'zoneC',
				parent: 'rack-c2',
				status: 'normal',
				u: 13
			},

			// C区接入交换机
			{
				id: 'access-sw-c1',
				type: 'access-switch',
				name: '存储交换机C1',
				zone: 'zoneC',
				x: 500,
				y: 220,
				status: 'normal',
				rack: 'R07',
				u: 2
			},
			{
				id: 'access-sw-c2',
				type: 'access-switch',
				name: '存储交换机C2',
				zone: 'zoneC',
				x: 500,
				y: 420,
				status: 'normal',
				rack: 'R08',
				u: 2
			}
		],

		links: [
			// 核心区域链路（强化防火墙关联）
			{
				source: 'core-sw1',
				target: 'access-sw-b1',
				type: 'fiber',
				bandwidth: 100,
				status: 'normal'
			},
			{
				source: 'core-sw1',
				target: 'access-sw-b2',
				type: 'fiber',
				bandwidth: 100,
				status: 'normal'
			},
			{
				source: 'core-sw1',
				target: 'access-sw-b3',
				type: 'fiber',
				bandwidth: 100,
				status: 'normal'
			},
			{
				source: 'core-sw2',
				target: 'access-sw-c1',
				type: 'fiber',
				bandwidth: 200,
				status: 'normal'
			},
			{
				source: 'core-sw2',
				target: 'access-sw-c2',
				type: 'fiber',
				bandwidth: 200,
				status: 'normal'
			},
			{
				source: 'core-sw1',
				target: 'core-sw2',
				type: 'fiber',
				bandwidth: 800,
				status: 'normal'
			}, // 核心交换机互联
			{
				source: 'gw1',
				target: 'core-sw1',
				type: 'fiber',
				bandwidth: 400,
				status: 'normal'
			},
			{
				source: 'gw2',
				target: 'core-sw2',
				type: 'fiber',
				bandwidth: 400,
				status: 'normal'
			},
			{
				source: 'firewall',
				target: 'gw1',
				type: 'fiber',
				bandwidth: 400,
				status: 'normal'
			},
			{
				source: 'firewall',
				target: 'gw2',
				type: 'fiber',
				bandwidth: 400,
				status: 'normal'
			},
			{
				source: 'firewall',
				target: 'dmz-switch',
				type: 'fiber',
				bandwidth: 200,
				status: 'normal'
			}, // 防火墙与DMZ交换机关联

			// 接入到机柜链路
			{
				source: 'access-sw-b1',
				target: 'rack-b1',
				type: 'copper',
				bandwidth: 40,
				status: 'normal'
			},
			{
				source: 'access-sw-b2',
				target: 'rack-b2',
				type: 'copper',
				bandwidth: 40,
				status: 'normal'
			},
			{
				source: 'access-sw-b3',
				target: 'rack-b3',
				type: 'copper',
				bandwidth: 40,
				status: 'normal'
			},
			{
				source: 'access-sw-c1',
				target: 'rack-c1',
				type: 'fiber',
				bandwidth: 100,
				status: 'normal'
			},
			{
				source: 'access-sw-c2',
				target: 'rack-c2',
				type: 'fiber',
				bandwidth: 100,
				status: 'normal'
			},

			// 机柜内部服务器连接（物理视图显示，强化关联）
			{
				source: 'rack-b1',
				target: 'srv-b1-1',
				type: 'backplane',
				bandwidth: 10,
				status: 'normal',
				internal: true
			},
			{
				source: 'rack-b1',
				target: 'srv-b1-2',
				type: 'backplane',
				bandwidth: 10,
				status: 'normal',
				internal: true
			},
			{
				source: 'rack-b1',
				target: 'srv-b1-3',
				type: 'backplane',
				bandwidth: 10,
				status: 'normal',
				internal: true
			},
			{
				source: 'rack-b1',
				target: 'srv-b1-4',
				type: 'backplane',
				bandwidth: 10,
				status: 'normal',
				internal: true
			},
			{
				source: 'rack-b2',
				target: 'srv-b2-1',
				type: 'backplane',
				bandwidth: 10,
				status: 'normal',
				internal: true
			},
			{
				source: 'rack-b2',
				target: 'srv-b2-2',
				type: 'backplane',
				bandwidth: 10,
				status: 'error',
				internal: true
			},
			{
				source: 'rack-b2',
				target: 'srv-b2-3',
				type: 'backplane',
				bandwidth: 10,
				status: 'normal',
				internal: true
			},
			{
				source: 'rack-b2',
				target: 'srv-b2-4',
				type: 'backplane',
				bandwidth: 10,
				status: 'normal',
				internal: true
			},
			{
				source: 'rack-b3',
				target: 'srv-b3-1',
				type: 'backplane',
				bandwidth: 10,
				status: 'normal',
				internal: true
			},
			{
				source: 'rack-b3',
				target: 'srv-b3-2',
				type: 'backplane',
				bandwidth: 10,
				status: 'normal',
				internal: true
			},
			{
				source: 'rack-b3',
				target: 'srv-b3-3',
				type: 'backplane',
				bandwidth: 10,
				status: 'normal',
				internal: true
			},
			{
				source: 'rack-b3',
				target: 'srv-b3-4',
				type: 'backplane',
				bandwidth: 10,
				status: 'normal',
				internal: true
			},
			{
				source: 'rack-c1',
				target: 'nas-1',
				type: 'sas',
				bandwidth: 25,
				status: 'normal',
				internal: true
			},
			{
				source: 'rack-c1',
				target: 'nas-2',
				type: 'sas',
				bandwidth: 25,
				status: 'normal',
				internal: true
			},
			{
				source: 'rack-c2',
				target: 'san-1',
				type: 'fc',
				bandwidth: 32,
				status: 'normal',
				internal: true
			},
			{
				source: 'rack-c2',
				target: 'san-2',
				type: 'fc',
				bandwidth: 32,
				status: 'normal',
				internal: true
			}
		]
	};

	// 初始化图表
	onMounted(() => {
		// 确保容器尺寸正确
		const container = document.getElementById('large-topology');
		container.style.width = '100%';
		container.style.height = '100vh';
		myChart.value = echarts.init(container);

		// 初始化图表
		updateChart();

		// 响应窗口大小变化
		window.addEventListener('resize', () => {
			container.style.height = '100vh';
			myChart.value?.resize();
		});
	});

	// 过滤分区数据
	const filteredData = computed(() => {
		if (currentZone.value === 'all') return datacenterData;

		return {
			...datacenterData,
			nodes: datacenterData.nodes.filter(node => node.zone === currentZone.value),
			links: datacenterData.links.filter(link => {
				const sourceNode = datacenterData.nodes.find(n => n.id === link.source);
				const targetNode = datacenterData.nodes.find(n => n.id === link.target);
				return sourceNode?.zone === currentZone.value && targetNode?.zone === currentZone.value;
			})
		};
	});

	// 更新图表
	function updateChart() {
		const data = filteredData.value;
		const isPhysical = viewMode.value === 'physical';

		// 统计状态数据
		statusCount.value = {
			normal: data.nodes.filter(n => n.status === 'normal').length,
			warning: data.nodes.filter(n => n.status === 'warning').length,
			error: data.nodes.filter(n => n.status === 'error').length
		};

		activeLinks.value = data.links.filter(l => l.status === 'normal').length;
		totalBandwidth.value = data.links.reduce((sum, link) => sum + link.bandwidth, 0);

		// 生成ECharts配置
		const option = {
			backgroundColor: '#0f172a',
			tooltip: {
				trigger: 'item',
				backgroundColor: 'rgba(15, 23, 42, 0.9)',
				borderColor: getStatusColor('normal'),
				borderWidth: 1,
				textStyle: {
					color: '#fff'
				},
				formatter: (params) => {
					const item = params.data;
					if (params.dataType === 'node') {
						return `
            <div>
              <h4 style="color: ${getStatusColor(item.status)}">${item.name}</h4>
              <p>类型: ${getTypeName(item.type)}</p>
              <p>状态: ${getStatusText(item.status)}</p>
              ${item.rack ? `<p>机柜: ${item.rack}</p>` : ''}
              ${item.u ? `<p>位置: U${item.u}</p>` : ''}
              ${item.zone ? `<p>分区: ${getZoneName(item.zone)}</p>` : ''}
              ${item.parent ? `<p>所属机柜: ${data.nodes.find(n => n.id === item.parent)?.name}</p>` : ''}
            </div>
          `;
					} else {
						return `
            <div>
              <h4>链路 ${item.source} → ${item.target}</h4>
              <p>类型: ${item.type === 'fiber' ? '光纤' : item.type === 'copper' ? '铜缆' : '背板'}</p>
              <p>带宽: ${item.bandwidth}Gbps</p>
              <p>状态: ${getStatusText(item.status)}</p>
            </div>
          `;
					}
				}
			},
			series: [{
				type: 'graph',
				layout: isPhysical ? 'none' : 'force',
				force: {
					repulsion: 1000,
					edgeLength: 150,
					layoutAnimation: true
				},
				roam: true, // 支持缩放和平移
				focusNodeAdjacency: true, // 聚焦节点时高亮关联链路
				data: data.nodes.map(node => {
					// 找到父机柜（如果有）
					const parentNode = node.parent ? data.nodes.find(n => n.id === node.parent) : null;

					return {
						...node,
						// 机柜显示为大矩形，服务器为小圆形
						symbol: node.type.includes('rack') ? 'rect' : 'circle',
						symbolSize: node.type.includes('rack') ? [120, 250] : node.type.includes(
							'switch') || node.type === 'firewall' ? 30 : 18,
						itemStyle: {
							color: getNodeColor(node.type, node.status),
							borderColor: '#fff',
							borderWidth: node.type.includes('rack') ? 2 : 1,
							shadowBlur: node.status === 'error' ? 20 : 5,
							shadowColor: getStatusColor(node.status)
						},
						label: {
							show: showDetails.value || !node.type.includes('server'),
							color: '#fff',
							fontSize: node.type.includes('rack') ? 14 : 12,
							formatter: node.type.includes('rack') ? '{b}' : (showDetails.value ?
								'{b}' : '')
						},
						// 物理视图：服务器节点吸附在机柜内部
						x: isPhysical && parentNode ?
							parentNode.x + 20 // 机柜内偏移
							:
							node.x,
						y: isPhysical && parentNode ?
							parentNode.y + (node.u * 5) // 按U位垂直排列
							:
							node.y,
						// 机柜添加内部填充色
						emphasis: {
							scale: !node.type.includes('rack'), // 机柜不缩放
							itemStyle: {
								shadowBlur: 20,
								shadowColor: '#fff'
							}
						}
					};
				}),
				links: data.links.map(link => ({
					...link,
					lineStyle: {
						color: getLinkColor(link.type, link.status),
						width: link.bandwidth / 30,
						curveness: isPhysical ? 0 : 0.2,
						type: link.type === 'fiber' ? 'dashed' : 'solid',
						opacity: link.status === 'normal' ? 1 : 0.5,
						animation: link.status === 'normal',
						animationDuration: 3000
					},
					label: {
						show: showDetails.value && !link.internal,
						color: '#fff',
						fontSize: 12,
						formatter: `${link.bandwidth}G`
					},
					emphasis: {
						lineStyle: {
							width: 5
						}
					}
				})),
				// 物理视图显示机柜内部链路，强化服务器与机柜关联
				showSymbol: true,
				lineStyle: {
					smooth: true
				}
			}]
		};

		myChart.value.setOption(option);
	}

	// 辅助函数：类型名称转换
	function getTypeName(type) {
		const map = {
			'gateway': '核心网关',
			'core-switch': '核心交换机',
			'access-switch': '接入交换机',
			'firewall': '边界防火墙',
			'server-rack': '服务器机柜',
			'storage-rack': '存储机柜',
			'server': '应用服务器',
			'storage': '存储设备'
		};
		return map[type] || type;
	}

	// 辅助函数：状态文本
	function getStatusText(status) {
		return {
			normal: '正常',
			warning: '高负载',
			error: '故障'
		} [status] || '未知';
	}

	// 辅助函数：分区名称
	function getZoneName(zone) {
		return {
			zoneA: 'A区（核心）',
			zoneB: 'B区（应用）',
			zoneC: 'C区（存储）'
		} [zone] || zone;
	}

	// 辅助函数：颜色方案
	function getStatusColor(status) {
		return {
			normal: '#22c55e',
			warning: '#f59e0b',
			error: '#ef4444'
		} [status] || '#94a3b8';
	}

	function getNodeColor(type, status) {
		const baseColors = {
			'gateway': '#0ea5e9',
			'core-switch': '#3b82f6',
			'access-switch': '#60a5fa',
			'firewall': '#06b6d4',
			'server-rack': 'rgba(16, 185, 129, 0.3)', // 半透明绿色机柜
			'storage-rack': 'rgba(139, 92, 246, 0.3)', // 半透明紫色机柜
			'server': '#22c55e',
			'storage': '#a855f7'
		};
		// 状态覆盖：故障>警告>正常
		return status === 'error' ? getStatusColor('error') :
			status === 'warning' ? getStatusColor('warning') :
			baseColors[type] || '#94a3b8';
	}

	function getLinkColor(type, status) {
		return status === 'error' ? getStatusColor('error') :
			type === 'fiber' ? '#94a3b8' :
			type === 'backplane' ? '#10b981' : // 机柜内部链路用绿色
			'#64748b';
	}

	// 事件处理
	function filterByZone() {
		updateChart();
	}

	// 监听视图变化
	watch([viewMode, showDetails, filteredData], () => {
		updateChart();
	});
</script>

<style scoped>
	.large-datacenter {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: #0f172a;
	}

	.top-controls {
		/* position: absolute;
		top: 20px;
		left: 20px; */
		background-color: rgba(30, 41, 59, 0.8);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	}

	.el-button-group .el-button {
		background-color: #1e293b;
		border-color: #334155;
		color: #f8fafc;
		transition: all 0.3s ease;
	}

	.el-button-group .el-button.active {
		background-color: #3b82f6;
		border-color: #3b82f6;
		color: white;
	}

	.el-select,
	.el-switch {
		background-color: #1e293b;
		color: #f8fafc;
		--el-select-text-color: #f8fafc;
		--el-switch-on-color: #22c55e;
	}

	.chart-container {
		width: 100%;
		height: 100%;
	}

	.status-panel {
		width: 360px;
		max-width: 360px;
		background-color: rgba(30, 41, 59, 0.8);
		border-radius: 8px;
		color: #f8fafc;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	}

	.status-panel h3 {
		margin: 0 0 15px;
		padding-bottom: 10px;
		border-bottom: 1px solid #334155;
		font-size: 16px;
	}

	.status-dot {
		width: 14px;
		height: 14px;
		border-radius: 50%;
	}

	.status-dot.normal {
		background-color: #22c55e;
	}

	.status-dot.warning {
		background-color: #f59e0b;
	}

	.status-dot.error {
		background-color: #ef4444;
	}

	.link-stats {
		margin-top: 15px;
		padding-top: 15px;
		border-top: 1px solid #334155;
	}

	.link-stats p {
		margin: 6px 0;
		font-size: 14px;
	}

	/* 解决ECharts提示框层级问题 */
	::v-deep .echarts-tooltip {
		z-index: 20 !important;
	}
</style>